<template>
 <div class="g-rowl1 styl1">
   <div class="g-topb1">
    <div class="ll">
      <div class="g-titb1">
        <div class="h3">视频监控</div>
      </div>
    </div>
    <div class="rr">
      <router-link to="/" class="g-btnb1">
        <img src="@img/b-i1.png" alt="" class="icn" />
        <span>返回首页</span>
      </router-link>
    </div>
    <img src="@img/b-line1.png" alt="" class="line" />
  </div>
  <div class="content">
    <div class="col-l">
      <div class="m-videol2 styl1">
        <div class="top" :style="'background-image: url(' + getImageUrl('warnbgl1-1.png') + ');'">
          <video
            class="video"
            :poster="currentVideo.poster"
            :src="currentVideo.src"
            muted
            autoplay
            controls
          ></video>
          <div class="btnbox">
            <div class="btn top"><img :src="getImageUrl('iconl12.png')" alt=""></div>
            <div class="btn right"><img :src="getImageUrl('iconl13.png')" alt=""></div>
            <div class="btn bottom"><img :src="getImageUrl('iconl14.png')" alt=""></div>
            <div class="btn left"><img :src="getImageUrl('iconl15.png')" alt=""></div>
          </div>
        </div>
        <div class="m-txtl1">
          <div class="info">
            <p>开平开发区始建于2002年,2007年5月和2008年6月分别被河北省科技厅确立为"河北省开平现代工程机械制造特色产业基地"和"河北省区域特色产业基地"。2012年12月河北省政府批复设立 唐山开平高新技术产业开发区"。2014年4月批准为河北唐山开平经济开发区。2019年12月获批国家应急产业(装备制造业)示范基地。开平区委、区政府为开平开发区的责任主体,开平开发区管委会根据开平区委、区政府的授权,对辖区行使管理、监督、协调、服务等职能。按照精简、统一、效能的原则,开平开发区管委会机关设置综合办公室、建设局、招商投资局、财政局、科技.......</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-r">
      <div class="m-informationl" :style="'background-image: url(' + getImageUrl('warnbgl2-1.png') + ');'">
        <div class="m-selectl1 styl2 w551">
          <a-select
            ref="select"
            v-model:value="value1"
            placeholder="请选择"
          >
            <a-select-option value="1">畜牧养殖场</a-select-option>
            <a-select-option value="2">畜牧养殖场1</a-select-option>
            <a-select-option value="3">畜牧养殖场2</a-select-option>
            <a-select-option value="4">畜牧养殖场3</a-select-option>
          </a-select>
        </div>
        <ul class="ul-listl5">
          <li v-for="(item,index) in listl1" :key="index" :class="actNum==index?'on':''" @click="onClick(index)">
            <div class="con">
              <div class="left">
                <div class="pic">
                  <div class="img" :style="'background-image: url(' + item.src + ');'"></div>
                </div>
              </div>
              <div class="txt">
                <div class="tit">{{item.tit}}</div>
                <div class="desc">{{item.desc}}</div>
              </div>
            </div>
          </li>
        </ul> 
      </div>
    </div>
  </div>
 </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}
// select
const value1 = ref("1");

const actNum = ref(0);
const listl1 = ref([
  {
    src:getImageUrl('imgl6.jpg'),
    videoSrc: '',
    tit:'养殖场东南区',
    desc:'青岛养殖场,成立于2000年,主要从事肉牛的养殖与销售业务,自成立以来一直保持着良好的发展态势,坚持"顾客至上"的发展理念,深受广大顾客欢迎,真挚欢迎广大顾客前来...',
  },
  {
    src:getImageUrl('imgl8.jpg'),
    videoSrc: '',
    tit:'养殖场东南区',
    desc:'青岛养殖场,成立于2000年,主要从事肉牛的养殖与销售业务,自成立以来一直保持着良好的发展态势,坚持"顾客至上"的发展理念,深受广大顾客欢迎,真挚欢迎广大顾客前来...',
  },
  {
    src:getImageUrl('imgl8.jpg'),
    videoSrc: '',
    tit:'养殖场东南区',
    desc:'青岛养殖场,成立于2000年,主要从事肉牛的养殖与销售业务,自成立以来一直保持着良好的发展态势,坚持"顾客至上"的发展理念,深受广大顾客欢迎,真挚欢迎广大顾客前来...',
  },
  {
    src:getImageUrl('imgl8.jpg'),
    videoSrc: '',
    tit:'养殖场东南区',
    desc:'青岛养殖场,成立于2000年,主要从事肉牛的养殖与销售业务,自成立以来一直保持着良好的发展态势,坚持"顾客至上"的发展理念,深受广大顾客欢迎,真挚欢迎广大顾客前来...',
  },
  {
    src:getImageUrl('imgl8.jpg'),
    videoSrc: '',
    tit:'养殖场东南区',
    desc:'青岛养殖场,成立于2000年,主要从事肉牛的养殖与销售业务,自成立以来一直保持着良好的发展态势,坚持"顾客至上"的发展理念,深受广大顾客欢迎,真挚欢迎广大顾客前来...',
  },
  {
    src:getImageUrl('imgl8.jpg'),
    videoSrc: '',
    tit:'养殖场东南区',
    desc:'青岛养殖场,成立于2000年,主要从事肉牛的养殖与销售业务,自成立以来一直保持着良好的发展态势,坚持"顾客至上"的发展理念,深受广大顾客欢迎,真挚欢迎广大顾客前来...',
  },
])
const currentVideo = ref({
  src: '',
  poster: getImageUrl('imgl6.jpg')
})

const onClick = (index) => {
  const selectedItem = listl1.value[index];
  currentVideo.value = {
    src: selectedItem.videoSrc,
    poster: selectedItem.src
  };
  actNum.value == index
};
</script>
